<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/overlay/SimpleMarker/examples/position-point.html -->
    <!-- <base href="//webapi.amap.com/ui/1.0/ui/overlay/SimpleMarker/examples/" /> -->
    <link rel="stylesheet" href="/static/css/weui.css" />
    <link rel="stylesheet" href="/static/css/example.css" />
    <base href="//webapi.amap.com/ui/1.0/ui/misc/MarkerList/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>操作设备</title>
    
    <link rel="stylesheet" type="text/css" href="http://webapi.amap.com/ui/1.0/ui/misc/MarkerList/examples/common.css">
    <style type="text/css">
        #container {
            width: 100%;
            height: 50%;
            margin: 0px;
        }

        .weui-btn {
            position: relative;
            display: block;
            width: 184px;
            margin-left: auto;
            margin-right: auto;
            padding: 8px 24px;
            box-sizing: border-box;
            font-weight: 700;
            font-size: 17px;
            text-align: center;
            text-decoration: none;
            color: #FFFFFF;
            line-height: 1.41176471;
            border-radius: 4px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            overflow: hidden;
        }

    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <!-- <script src="/static/js/jquery.js"></script> -->
</head>

<body>
    <div id="container">
    </div>
    <div style="position: fixed;top: 0em;left: 0em; width: 100%;background-color: #00000059; color:#ffffff;">
        <label class="weui-form-preview__label" style="color:#ffffff;">设备编号</label>
        <span id='deviceid' class="weui-form-preview__value">123123123123123</span>
    </div>
    <div id="panel1" style="display:none;position: fixed;top: 3em;right: 1em;height:20%;width:40%;overflow:auto;">
        <ul id="my-list"></ul>
    </div>
    <div id="intro" style="overflow:auto">
        <!--显示设备信息-->
        <div class="weui-form-preview__bd" style="padding:6px 15px;">
            <div class="weui-form-preview__item">
                <label class="weui-form-preview__label" style="color:#505050">社区名称</label>
                <span id='commuName' class="weui-form-preview__value" style="color:#505050">天安门广场</span>
            </div>
            <div class="weui-form-preview__item">
                <label class="weui-form-preview__label" style="color:#505050">社区地址</label>
                <span id='commuAdd' class="weui-form-preview__value" style="color:#505050">浙江省杭州市余杭区临平镇上某个地点</span>
            </div>
            <div class="weui-form-preview__item">
                <label class="weui-form-preview__label" style="color:#505050">设备状态</label>
                <span id='status' class="weui-form-preview__value" style="color:#505050">正常</span>
            </div>
            <div class="weui-form-preview__item">
                <label class="weui-form-preview__label" style="color:#505050">设备容积</label>
                <span id='usedVol' class="weui-form-preview__value" style="color:#505050">50</span>
            </div>
            <div class="weui-form-preview__item">
                <label class="weui-form-preview__label" style="color:#505050">最大容积</label>
                <span id='maxVol' class="weui-form-preview__value" style="color:#505050">100</span>
            </div>
        </div>
        <!--按钮部分-->
        <div>
            <a class="weui-btn weui-btn_primary" style="width:44%; display:inline-grid; margin-top: 0px ; margin-left:15px; margin-right:10px; background-color:#64cf5d;" href="javascript:" id="openDoor">开门</a>
            <a class="weui-btn weui-btn_primary" style="width:44%; display:inline-grid;margin-top: 0px;background-color:#4fafec " href="javascript:" id="closeDoor">关门</a>
            <a class="weui-btn weui-btn_primary" style="width:92%; display:block;margin-top:4px;background-color:#f29470" href="javascript:" id="stop">停止</a>
        </div>

        <div id="loadingToast" style="opacity: 0; display: none;">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-loading weui-icon_toast"></i>
                <p class="weui-toast__content" id="flag">设备开门中</p>
            </div>
        </div>

        <div id="loadingToast1" style="opacity: 0; display: none;">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-loading weui-icon_toast"></i>
                <p class="weui-toast__content" id="flag">设备关门中</p>
            </div>
        </div>

        <div id="loadingToast2" style="opacity: 0; display: none;">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-loading weui-icon_toast"></i>
                <p class="weui-toast__content" id="flag">暂停设备动作中</p>
            </div>
        </div>

        <!--页脚部分-->
        <div class="weui-footer weui-footer_fixed-bottom">
            <p class="weui-footer__links">
                <p class="weui-footer__link">访问官网</p>
                <a href="http://www.zjnnhj.com" class="weui-footer__link">zjnnhj@zjnnhj.com</a>
            </p>
            <p class="weui-footer__links">
                <p class="weui-footer__link">联系我们</p>
                <a href="http://www.zjnnhj.com" class="weui-footer__link">18106532996</a>
            </p>
            <p class="weui-footer__text">Copyright © 2020 牛能环保</p>
        </div>
   
    </div>
    
    
    <script type="text/javascript" src='http://webapi.amap.com/maps?v=1.4.15&key=1dec6ccdca8a90f2deacbeb2605753c9'></script>
    <!-- UI组件库 1.0 -->
    <script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script type="text/javascript">

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = decodeURI(window.location.search).substr(1).match(reg);
        if (r != null) return (r[2]);
        return null;
    };

    $(document).ready(function() {
        // 获取code和imei，根据两个参数，获取设备位置
        var code = getQueryString('code');
        var imei = getQueryString('imei');
        var lat = getQueryString('lat');
        var lng = getQueryString('lng');
        var carbinId = getQueryString('carbinId');
        //设备位置
        var postions = [];
        postions.push({
            id: 0,
            position: [120.000, 30.000],
            circle: {
                radius: 7,
                strokeColor: 'gray',
                fillColor: 'orange',
                fillOpacity: 0.8
            },
            desc: carbinId
        })

        var map = new AMap.Map('container', {
            zoom: 10
        });

        AMapUI.loadUI(['misc/MarkerList'], function(MarkerList) {  

            var makerlist = new MarkerList({
                //关联的map对象
                map: map,
                //列表的dom容器的id
                listContainer: 'my-list',
                //返回数据项的Id
                getDataId: function(dataItem, index) {
                    //index表示该数据项在数组中的索引位置，从0开始，如果确实没有id，可以返回index代替
                    return dataItem.id;
                },
                //返回数据项的位置信息，需要是AMap.LngLat实例，或者是经纬度数组，比如[116.789806, 39.904989]
                getPosition: function(dataItem) {
                    return dataItem.position;
                },
                // 这里不需要InfoWindow
                getInfoWindow: null,
                //返回数据项对应的Marker
                getMarker: function(dataItem, context, recycledMarker) {

                    //marker的标注内容
                    var content = dataItem.id + ': ' + dataItem.desc;

                    var label = {
                        offset: new AMap.Pixel(16, 18), //修改label相对于marker的位置
                        content: content
                    };

                    //存在可回收利用的marker
                    if (recycledMarker) {
                        //直接更新内容返回
                        recycledMarker.setLabel(label);
                        return recycledMarker;
                    }

                    //返回一个新的Marker
                    return new AMap.Marker({
                        label: label
                    });
                },

                //返回数据项对应的列表节点
                getListElement: function(dataItem, context, recycledListElement) {

                    var tpl = '<p><%- dataItem.id %>：<%- dataItem.desc %><br/>';


                    var content = MarkerList.utils.template(tpl, {
                        dataItem: dataItem,
                        dataIndex: context.index
                    });

                    if (recycledListElement) {
                        //存在可回收利用的listElement, 直接更新内容返回
                        recycledListElement.innerHTML = content;
                        return recycledListElement;
                    }

                    //返回一段html，MarkerList将利用此html构建一个新的dom节点
                    return '<li>' + content + '</li>';
                }

            });

            //监听marker在Map的添加和删除
            makerlist.on('markerAddToMap markerRemoveFromMap', function(event, record) {

                var marker = record.marker,
                    dataItem = record.data;


                if (!marker._circle) {
                    //创建一个新的circle，附加在Marker上
                    marker._circle = new AMap.Circle(dataItem.circle);

                } else {
                    //circle已经存在（切换数据时，marker会被回收利用），更新
                    marker._circle.setOptions(dataItem.circle);
                }

                switch (event.type) {
                    case 'markerAddToMap':

                        //更新map
                        marker._circle.setMap(marker.getMap());

                        //更新position
                        marker._circle.setCenter(marker.getPosition());

                        break;

                    case 'markerRemoveFromMap':
                        marker._circle.setMap(null);
                        break;
                }
            });


            var lngLats = postions;
            makerlist.render(lngLats);
        
        });


    
        // 获取code
        var code = getQueryString('code');
        var carbinId = getQueryString('carbinId');
        var commuName = getQueryString('commuName');
        var commuAdd = getQueryString('commuAdd');
        var usedVol = getQueryString('usedVol');
        var maxVol = getQueryString('maxVol');
        var status = getQueryString('status');
        var area = getQueryString('area');
        var flag = getQueryString('flag');

        console.log('---------flag----------');
        console.log(flag);
        console.log(flag == 'openwait');
        console.log(flag == 'closewait');

        // 将开门按钮置灰
        if (flag == 'openwait'){
            $('#openDoor').attr('disabled', true).css("pointer-events","none");
            $('#openDoor').removeClass('weui-btn_primary');
            // 按下后改变颜色
            $('#openDoor').css('background-color', '#47a52e');
            
            setTimeout(function(){
                // 禁用按钮8s
                $('#openDoor').removeAttr('disabled');
                $('#openDoor').addClass('weui-btn_primary');
                $('#openDoor').css('background-color', '#64cf5d');
            }, 5000);
            

        }
        if (flag == 'closewait'){
            $('#closeDoor').attr('disabled', true).css("pointer-events","none");
            $('#closeDoor').removeClass('weui-btn_primary');
            // 按下后改变颜色
            $('#closeDoor').css('background-color', '#2d86d2');

            setTimeout(function(){
                // 禁用按钮8s
                $('#closeDoor').removeAttr('disabled');
                $('#closeDoor').addClass('weui-btn_primary');
                $('#closeDoor').css('background-color', '#4fafec');
            }, 5000);
            

        }

        // 填充值
        var a=document.getElementById ("deviceid");
        a.innerHTML = carbinId;
        var b=document.getElementById ("commuName");
        b.innerHTML = commuName;
        var c=document.getElementById ("commuAdd");
        c.innerHTML = commuAdd;
        var d=document.getElementById ("usedVol");
        d.innerHTML = usedVol;
        var e=document.getElementById ("maxVol");
        e.innerHTML = maxVol;
        var f=document.getElementById ("status");
        f.innerHTML = status;


        var $loadingToast = $('#loadingToast');
        $('#openDoor').on('click', function(){
            if ($loadingToast.css('display') != 'none') return;
            var fredirect_uri = 'http://gzh.zjnnhj.com/niuneng/opendoor.html?carbinId=' + carbinId + '&commuName=' + commuName + '&commuAdd=' + commuAdd + '&usedVol=' + usedVol + '&maxVol=' + maxVol + '&status=' + status + '&area=' + area;
            var ffurl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5f2850581e4e064d&redirect_uri=" + encodeURIComponent(fredirect_uri) + "&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
            location.href = ffurl;  
        });

        var $loadingToast1 = $('#loadingToast1');
        $('#closeDoor').on('click', function(){
            if ($loadingToast1.css('display') != 'none') return;
            var fredirect_uri = 'http://gzh.zjnnhj.com/niuneng/closedoor.html?carbinId=' + carbinId + '&commuName=' + commuName + '&commuAdd=' + commuAdd + '&usedVol=' + usedVol + '&maxVol=' + maxVol + '&status=' + status + '&area=' + area;
            var ffurl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5f2850581e4e064d&redirect_uri=" + encodeURIComponent(fredirect_uri) + "&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
            location.href = ffurl;  
        });


        var $loadingToast2 = $('#loadingToast2');
        $('#stop').on('click', function(){
            if ($loadingToast2.css('display') != 'none') return;
            var fredirect_uri = 'http://gzh.zjnnhj.com/niuneng/pause.html?carbinId=' + carbinId + '&commuName=' + commuName + '&commuAdd=' + commuAdd + '&usedVol=' + usedVol + '&maxVol=' + maxVol + '&status=' + status + '&area=' + area;
            var ffurl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5f2850581e4e064d&redirect_uri=" + encodeURIComponent(fredirect_uri) + "&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
            location.href = ffurl;  
        });


        




        });

    /*
    AMap.plugin(['AMap.ToolBar'], function() {
        map.addControl(new AMap.ToolBar({
            map: map
        }));
    });*/



    
    </script>
</body>

</html>